import {
  createInbizSchema,
  createBaseSchema,
  createValidatorSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createModelSchema,
  createComponentLayout,
  createControllerSchema,
} from '@inbiz/setters';
import { createBehavior, createResource } from '@inbiz/core';
import { EformRichText } from './locale';

/**
 * 1.属性的默认值:defaultProps
 * 2.属性的json数据
 * */

export const defaultProps = {
  defaultvalue: '',
  placeholder: 'EformRichText.placeholder',
  tooltype: '标准',
  toolbar: {
    menu: [],
    toolbar: [],
  },
};

export const Button = {
  droppable: false,
  propsSchema: createInbizSchema({
    attribute: {
      ...createBaseSchema({
        placeholder: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'MultilingualInput',
          platform: 'web',
        },
        tooltype: {
          type: 'string',
          enum: ['标准', '简洁', '自定义'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          platform: 'web',
        },
        toolbar: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'TinymceConfig',
          'x-reactions': {
            dependencies: ['.tooltype'],
            fulfill: {
              schema: {
                'x-hidden': "{{$deps[0] !== '自定义'}}",
              },
            },
          },
          platform: 'web',
        },
        defaultvalue: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'TinymceModal',
          platform: 'web',
        },
      }),
      ...createValidatorSchema(false),
      // validator: {
      //   type: 'void',
      //   'x-component': 'CollapseItem',
      //   properties: {
      //     required: {
      //       type: 'boolean',
      //       'x-decorator': 'FormItem',
      //       'x-component': 'Switch',
      //     },
      //   },
      // },
    },
    style: {
      ...createComponentStyleSchema(),
      ...createComponentLayout(),
      ...createDecoratorStyleSchema(),
    },
    senior: {
      ...createModelSchema(),
      // ...createSoureSchema(),
    },
    controller:createControllerSchema({
      events: [
      {
        name: 'onChange',
        label: '数据变更',
        platform:'web'
      }
    ],
    })
  }),
};

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'EformRichText',
  selector: (node) => node.props['x-component'] === 'EformRichText',
  designerLocales: EformRichText,
  designerProps: Button,
});

export const Resource = createResource({
  icon: 'EformRichText',
  elements: [
    {
      componentName: 'Field',
      props: {
        title: {
          status: true,
          value: 'EformRichText.title',
        },
        type: 'string',
        'x-decorator': 'FormItem',
        'x-decorator-props': {
          // style: {
          //   height: '300px',
          // },
        },
        'x-component': 'EformRichText',
        'x-component-props': defaultProps,
      },
    },
  ],
});
